/*
 * @FilePath     : /study_code/scss/datatype.scss
 * @Description  : 数据类型
 * @Date         : 2025-04-23 15:37:58
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-23 16:37:18
 */
/* 1、7种数据类型； */

/* 1-1 数字 */
$space1: 10;

.box1 {
  padding-top: #{$space1}px;
}

/* 1-2 文本字符串 */
$content: 'string';

.box2::after {
  content: $content;
}

/* 1-3 颜色 */
$primary-color: blue;
$secondary-color: #04a3f9;
$third-color: rgba(255, 0, 0, 0.5);

.box3 {
  color: $primary-color;
  background-color: $secondary-color;
  border: 1px solid $third-color;
}

/* 1-4 布尔值 */
$theme: true;
// $theme: false;
@if $theme {
  .box4 {
    text-align: center;
  }
}

/* 1-5 空值 */
$content-srd: null;
$content-srd: 'null-string' !default;
.box5::after {
  content: $content-srd;
}

/* 1-6 值列表 */
$font-theme: Helvetica, Arial, sans-serif;
.box6 {
  font: {
    family: $font-theme;
  }
}

/* 1-7 maps（见下方） */

/* 2、2种类型的字符串 */
/* 2-1 带引号的字符串 */
$url: 'http://sass-lang.com';
.box7::after {
  content: $url;
}

/* 2-2 不带引号的字符串 */
.box8 {
  font-weight: bold;
}

// 特殊：#{} 中带引号字符串 会被编译为 不带引号的字符串

// 字符串变量用于 mixins 中的选择器名称。
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: 'Hi, Firefox users!';
  }
}

@include firefox-message('.head');

/* 3-1、列表值 & 列表值用于 each 循环 */
$image-list: header body footer;
@each $img in $image-list {
  .#{$img}-bg {
    background-image: url('/images/#{$img}.png');
  }
}

/* 3-2、列表格式为逗号隔开 */
$font-arr: 20, 22, 24, 26, 28;
@each $fs in $font-arr {
  .font#{$fs} {
    font: {
      size: $fs;
    }
  }
}

/* 3-3、列表 包含 其他列表 */
$list2: (puma, black, default), (sea-slug, blue, pointer), (egret, white, move);
@each $animal, $color, $cursor in $list2 {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

/* 7-1、值为 map */
$value-map: (
  text: #00ff00,
  background: #0000ff,
  border: #ff0000,
);

@each $key, $value in $value-map {
  .box1 {
    #{$key}: $value;
  }
}